<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../vue.js"></script>
    <style>div {
        padding: 20px;
        border: 2px green solid;
    }
    </style>
</head>
<body>
<h2>【例29】组件之间数据传递--$emit方法 子组件向父组件汇报--发送</h2>
<hr>
<div id="app">
    <my-老子></my-老子>
</div>

<template id="子组件模板">
    <div>
        <button @click="click">请求要钱</button>
        钱数<input type="text" v-model="msg">
    </div>
</template>

<template id="父组件模板">
    <div>
        <my-小子 @chfn="transContent"></my-小子>
        <p>儿子打电话要 : {{message}}钱。</p>
    </div>
</template>

<script>
    Vue.component('my-老子', {
        template: '#父组件模板',
        data() {
            return {
                message: ''
            }
        },
        methods: {
            transContent(value) {
                this.message = value
            }
        }
    });
    Vue.component('my-小子', {
        template: '#子组件模板',
        data() {
            return {
                msg: '1000'
            }
        },
        methods: {
            click() {
                this.$emit('chfn', this.msg);
            }
        }
    });
    let vm = new Vue({el: '#app'})
</script>
<hr>
<p><a href="index.html">返回章节目录</a>
    <script>document.write(document.lastModified); </script>
</p>
</body>
</html>
